import React, { useState } from 'react';
import { Form, Button, Input, Modal, Row, Col, Tag } from 'antd';

const FormItem = Form.Item;
const formLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 17,
  },
};

const DetailsForm = (props) => {
  const [formVals] = useState({
    uuid: props.values.uuid,
    index: props.values.index,
    storeSize: props.values['store.size'],
    docsCount: props.values['docs.count'],
    health: props.values.health,
    status: props.values.status,
    docsDelete: props.values['docs.deleted'],
    delete: props.values.delete,
    pri: props.values.pri,
    priStoreSize: props.values['pri.store.size'],
    rep: props.values.rep,
    createTime: props.values.createTime,
    backup: props.values.backup,
  });
  const [form] = Form.useForm();
  const { onCancel: handleDetailModalVisible, detailModalVisible, values } = props;

  const timeAddZero = (param) => {
    return param < 10 ? `0${param}` : param;
  };
  const formatDate = (param) => {
    const time = new Date(param);
    const year = time.getFullYear();
    const month = time.getMonth() + 1;
    const date = time.getDate();
    const hour = time.getHours();
    const minute = time.getMinutes();
    const second = time.getSeconds();
    return `${year}-${timeAddZero(month)}-${timeAddZero(date)} ${timeAddZero(hour)}:${timeAddZero(
      minute,
    )}:${timeAddZero(second)}`;
  };
  const renderContent = () => {
    return (
      <>
        <Row gutter={16}>
          <Col className="gutter-row" span={12}>
            <FormItem name="uuid" label="索引ID">
              <Input />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={12}>
            <FormItem name="index" label="索引名称">
              <Input />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={12}>
            <FormItem name="storeSize" label="索引大小">
              <Input />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={12}>
            <FormItem name="docsCount" label="文档数量">
              <Input />
            </FormItem>
          </Col>
          <Col className="gutter-row" span={12}>
            <FormItem name="docsDelete" label="文档状态">
              <Input />
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="health" label="监控状态">
              {formVals.health === 'green' ? (
                <Tag color="#009688">{formVals.health}</Tag>
              ) : (
                <Tag color="#ff4d4f">{formVals.health}</Tag>
              )}
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="status" label="索引状态">
              <Input />
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="delete" label="是否删除">
              {formVals.delete === '0' ? (
                <Tag color="#009688">未删除</Tag>
              ) : (
                <Tag color="#ff4d4f">已删除</Tag>
              )}
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="pri" label="分片">
              <Input />
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="priStoreSize" label="分片大小">
              <Input />
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="rep" label="副本">
              <Input />
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="backup" label="是否备份">
              {formVals.backup === '0' ? (
                <Tag color="#009688">已备份</Tag>
              ) : (
                <Tag color="#ff4d4f">未备份</Tag>
              )}
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem name="createTime" label="创建时间">
              <span style={{ textAlign: 'center', height: '32px', lineHeight: '32px' }}>
                {formatDate(formVals.createTime)}
              </span>
            </FormItem>
          </Col>
        </Row>
      </>
    );
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => handleDetailModalVisible(false, values)}>确认</Button>
      </>
    );
  };

  return (
    <Modal
      width={640}
      bodyStyle={{
        padding: '32px 40px 48px',
      }}
      destroyOnClose
      title="索引详情"
      visible={detailModalVisible}
      footer={renderFooter()}
      onCancel={() => handleDetailModalVisible()}
    >
      <Form
        layout="horizontal"
        {...formLayout}
        form={form}
        initialValues={{
          uuid: formVals.uuid,
          index: formVals.index,
          storeSize: formVals.storeSize,
          docsCount: formVals.docsCount,
          docsDelete: formVals.docsDelete,
          health: formVals.health,
          status: formVals.status,
          delete: formVals.delete,
          pri: formVals.pri,
          priStoreSize: formVals.priStoreSize,
          rep: formVals.rep,
          createTime: formVals.createTime,
          backup: formVals.backup,
        }}
      >
        {renderContent()}
      </Form>
    </Modal>
  );
};

export default DetailsForm;
